<template>
  <div class="index_root" id="app">
    <navigation></navigation>
    <div class="index_swiper_container swiper_container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img class="slide_bg" src="./assets/img/carousel_1.jpg" alt="">
            </div>
            <div class="swiper-slide">
              <img class="slide_bg" src="./assets/img/carousel_2.jpg" alt="">
            </div>
            <div class="swiper-slide">
              <img class="slide_bg" src="./assets/img/carousel_3.jpg" alt="">
            </div>
            <!-- <div class="swiper-slide">
              <video class="slide_bg" src="https://basic-admin.basicagency.com/uploads/Hero-Loop_v6.mp4" controls></video>
            </div> -->
        </div>
    </div>
    <bottom></bottom>
  </div>
</template>
<style scoped>
.index_root{
  overflow-x: hidden;
}
.index_swiper_container{
  margin-top: 50px;
}
.index_swiper_container .slide_bg{
  width: 100%;
  max-height: 700px;
  object-fit: cover;
}
</style>
<script>
import Bottom from './components/Bottom.vue';
import Navigation from './components/Navigation.vue'
import Swiper from './assets/js/swiper-bundle.min.js'


export default {
  name:'App',
  components: {
    Navigation,
    Bottom,},
    data(){
        return{}
    },
    mounted(){
        new Swiper('.index_swiper_container', {
            autoplay: {
              delay: 3000,
              stopOnLastSlide: false,
              disableOnInteraction: true,
            },//可选选项，自动滑动
            loop : true,
        })
    }
};
</script>